<template>
    <div class="courseExercises">
        <div class="editoButtons" v-if="permission > 1">
            <div class="button" @click="() => {router.push('/course/courseContent/' + courseId + '/courseContentResources')}">资源管理</div>
        </div>
        <div class="empty" v-if="resourcesList?.length <= 0">暂无资源</div>
        <ResourcesList v-model="resourcesList" :joinCourse="joinCourse" :permission="permission" />
    </div>
</template>

<script lang="ts">
import ResourcesList from '@/components/course/ResourcesList.vue';
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { resourceApi } from '@/api/course/Course';
export default {
    name: 'courseExercises',
    components: {
        ResourcesList
    }
}
</script>


<script setup lang="ts">
    const router = useRouter();  // 获取路由参数
    const route = useRoute();  // 获取路由参数
    const courseId = ref<number>(0); // 初始化为 null
    const resourcesList = ref([]);
    
    const props = defineProps<{
        pPermission: number,
        joinCourse: () => Promise<boolean>;
    }>();

    // 获取课程权限
    const permission = ref(0);

    // 参数转换函数（确保字符串转换为数字）
    const parseSafeInt = (value: string | string[] | undefined): number | undefined => {
        if (typeof value === 'string') {
            const num = parseInt(value, 10);
            return isNaN(num) ? undefined : num;
        }
        return undefined;
    };
    watch(() => ({
        chourseIdParam: route.params.courseId,
        permissionParam: props.pPermission
    }), async ({chourseIdParam, permissionParam}) => {
        if(chourseIdParam)
        {
            courseId.value = parseSafeInt(chourseIdParam as string);
            if (courseId.value) {
                resourceApi.getResourceList(courseId.value).then((res) => {
                    resourcesList.value = res;
                });
            }
        }
        if(permissionParam) permission.value = permissionParam;
    }, { immediate: true, deep: true } );
</script>

<style scoped>
.courseExercises {
    padding: 20px;
    width: 100%;
}
/* 编辑按钮 */
.courseExercises .editoButtons {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 10px;
}
.courseExercises .empty {
    font-size: 32px;
    font-weight: bold;
	font-family: "artisticFonts";
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(180, 180, 180, 1);
}
.courseExercises .editoButtons .button{
    padding: 5px 10px;
    transition: all 0.3s;
    background-color: rgba(65, 185, 255, 1);
    color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    font-size: 18px;
    margin-right: 10px;
}
.courseExercises .editoButtons .button:hover {
    background-color: rgba(65, 185, 255, 0.8);
}
.courseExercises .editoButtons .button:active {
    transition: all 0.1s;
    background-color: rgba(65, 185, 255, 0.9);
}
</style>
